<template>
  <div class="swiper">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for='value in swiperList'  :key="value.id">
        <img
          class="imgSwiper" :src="value.imgUrl"
        />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "HomeSwiper",
  props:{
    swiperList:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
      swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          }, 
          autoplay:true
          // Some Swiper option/callback...
        },
    }
  },
};
</script>
<style lang='stylus' scoped>
.swiper {
  width 100%
  height 0
  overflow hidden
  padding-bottom 30.5% //此处为轮播图宽度的30.5%
  background-color #ccc
  .imgSwiper {
    width: 100%;
  }

  >>> .swiper-pagination-bullet-active {
    background-color: #fff;
  }
}
</style>